<template>
    <div class="page">

        <div class="shopTypeStype">
            <!-- 一级类目区域 -->
            <div class="category-level1">
                <div class="category-label">一级类目：</div>

                <div class="allType">
                    <div class="allTypeRight" :class="{ 'active-category': selectItem.id === undefined }"
                        @click="selectLevel1({ id: undefined, title: '全部', children: [] })">
                        全部
                    </div>
                    <div class="allTypeRight" v-for="(item, index) in level1Categories" :key="index"
                        :class="{ 'active-category': selectItem.id === item.id }" @click="selectLevel1(item)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <!-- 二级类目区域 -->
            <div class="category-level2" v-if="selectedLevel1">
                <div class="category-label">二级类目：</div>

                <div class="typeTwo">
                    <div class="allTypeTwo">
                        <div class="allTypeRightTwo" :class="{ 'active-category': selectedLevel2.id === undefined }"
                            @click="selectLevel2({ id: undefined, title: '全部', children: [] })">
                            全部
                        </div>
                        <div class="allTypeRightTwo" v-for="(subItem, subIndex) in level2Categories" :key="subIndex"
                            :class="{ 'active-category': selectedLevel2.id === subItem.id }"
                            @click="selectLevel2(subItem)">
                            {{ subItem.title }}
                        </div>
                    </div>

                    <!-- 三级类目区域 -->
                    <div class="category-level3" v-if="selectedLevel2 && showMore">
                        <div class="allTypeThree">
                            <div class="allTypeRightThree" v-for="(thirdItem, thirdIndex) in level3Categories"
                                :key="thirdIndex" :class="{ 'active-category': selectedLevel3 === thirdItem }"
                                @click="selectLevel3(thirdItem)">
                                {{ thirdItem }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="lessSq" v-if="showMore" @click="showLess">
            收起 <i class="el-icon-arrow-up"></i>
          </div>
          <div class="MoreSq" v-if="!showMore" @click="showMoreItems">
            展开 <i class="el-icon-arrow-down"></i>
          </div> -->
            </div>

            <!-- 排序和商品数量区域 -->

        </div>
        <div class="shopTypeStype sort-and-count">
            <div class="zonghe">综合排序</div>
            <div class="count-label">
                (共<span style="color: #ff6b00">{{ countNum }}</span>个商品)
            </div>
        </div>

        <div>
            <div  class="product-list-wrapper">
                <el-row :gutter="20" v-if="products.length > 0">
                    <el-col :span="6" v-for="(product, index) in products" :key="index">
                        <el-card class="product-card">
                            <img @click="ProductDetails(product)" :src="product.thumb" alt="" class="product-image">

                            <div class="product-info">
                                <div class="price-location">
                                    <span class="price">FOB <span class="priceIcon"> ¥</span><span class="produtName">{{
                                        product.price }}</span>
                                    </span>
                                    
                                    <!-- <span v-if="product.discount" class="discount-tag">{{ product.discount }}%</span> -->
                                </div>
                                <p class="product-name">{{ product.title }}</p>
                                <!-- <div class="seller-info">
                                    <span class="seller-type">

                                        <img src="../../../../static/engineering5188/homPage/strength.png"
                                            v-if="product.if_strength" />

                                    </span>
                                    <span class="seller-name">{{ product.company_title }}</span>
                                </div> -->
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <div v-else class="noDataClass">暂无数据</div>
            </div>

            <div class="pageClass">
                <div class="pageClass-first" @click="LoadFistData">首页</div>
                <div class="pageClass-Last" @click="LoadLastData">上一页</div>
                <template v-if="totalPage < 6">
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)"
                        v-if="totalPage >= 1">1</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)"
                        v-if="totalPage >= 2">2</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)"
                        v-if="totalPage >= 3">3</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)"
                        v-if="totalPage >= 4">4</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)"
                        v-if="totalPage >= 5">5</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)"
                        v-if="totalPage >= 6">6</div>
                </template>
                <template v-else>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 1 }" @click="loadPageData(1)">1
                    </div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 2 }" @click="loadPageData(2)">2
                    </div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 3 }" @click="loadPageData(3)">3
                    </div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 4 }" @click="loadPageData(4)">4
                    </div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 5 }" @click="loadPageData(5)">5
                    </div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == 6 }" @click="loadPageData(6)">6
                    </div>


                    <div class="pageShenLue">...</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage - 1 }"
                        @click="loadPageData(totalPage - 1)">{{ totalPage - 1 }}</div>
                    <div :class="{ 'pageClass-num': true, 'active': currentPage == totalPage }"
                        @click="loadPageData(totalPage)">{{
                            totalPage }}</div>
                </template>
                <div class="pageClass-Last" @click="LoadNextData">下一页</div>
                <div class="pageClass-first" @click="LoadEndData">末页</div>
            </div>

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: "shoptype",
    computed: {
    ...mapState([
      "userInfo",
    ]),
  },
    watch: {
        '$route.query.keyword': {
            immediate: true, // 立即执行一次回调函数
            handler(newKeyword) {
                this.keyword = newKeyword;
                this.$emit("updateData", { catid: this.selectItem.id, catid2: this.selectItem2.id });
            }
        }
    },
    data() {
        return {
            selectItem: {},
            selectItem2: {},
            company_name: "",
            level1Categories: [
            ],
            level2Categories: [],
            level3Categories: [],
            selectedLevel1: "全部",
            selectedLevel2: {},
            selectedLevel3: {},
            showMore: false,
            countNum: 0,
            keyword: "",
            dataListShow: 1,
            totalPage: 20,
            rating: 4.5,
            
            currentPage: 1,
            pageSize: 16,
            total: 230, // 假设总数据量为230条，可根据实际情况修改
            pageRange: 5,// 控制显示的页码数量范围
            
            shopList: [],

            shop_id: '',
            products: [],
            queryObj: {
                catid: undefined,
                catid2: undefined,
            },
        };
    },
    created() {
        if (this.$route.query.shop_id) {
            this.shop_id = this.$route.query.shop_id
        } else {
            this.shop_id = this.userInfo.id
        }
        this.level2Categories = this.selectItem.children;
        this.getData();
        this.getProductList();
    },
    methods: {
        updateCount(count) {
            this.countNum = count;
        },
        getData() {
            this.list = [];
            this.$httpApi("/api/channelList", {
            }, 'get').then(res => {
                for (let i = 0; i < res.data.length; i++) {
                    this.level1Categories.push(res.data[i])
                }
            })
        },
        selectLevel1(item) {
            this.selectItem = item;
            this.level2Categories = item.children;
            this.showMore = false;
            this.queryObj.catid = item.id;
            this.queryObj.catid2 = undefined;
            this.getProductList();
        },
        selectLevel2(item) {
            this.selectedLevel2 = item;
            this.selectItem2 = item;
            this.level3Categories = item.children;
            if (this.level3Categories && this.level3Categories.length > 0) {
                this.showMore = true;
            }
            this.queryObj.catid2 = item.id;
            this.getProductList();
        },

        selectLevel3(item) {
            this.selectedLevel3 = item;
        },

        showMoreItems() {
            this.showMore = true;
        },
        showLess() {
            this.showMore = false;
        },
        updateData(query) {
            this.queryObj = query;
            this.getProductList();
        },
        setData(num) {
            this.dataListShow = num;
            // this.queryObj = query;
            this.currentPage = 1;
            this.getProductList();
        },
        getProductList() {
            this.$httpApi('/api/shopPros', {
                shop_id:  this.shop_id ,
                ...this.queryObj,
                page: this.currentPage,
                limit: this.pageSize
            }, 'get').then(res => {
                this.products = res.data.list;
                this.totalPage = Math.ceil(res.data.count / this.pageSize);
                this.countNum = res.data.count;
                if (this.totalPage == 0) {
                    this.totalPage = 1;
                }
            })

        },
        LoadEndData() {
            this.currentPage = this.totalPage;
            this.getProductList();
        },
        LoadNextData() {
            if (this.currentPage < this.totalPage) {
                this.currentPage++;
                this.getProductList();
            }
        },
        LoadFistData() {
            this.currentPage = 1;
            this.getProductList();
        },

        LoadLastData() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.getProductList();
            }
        },

        loadPageData(val) {
            this.currentPage = val;
            this.getProductList();
        },
        ProductDetails(item) {
            console.log('111111')
            this.$router.push({
                path: "/ProductDetails",
                query: {
                    id: item.id
                }
            })
        },
        openMap() {
            console.log('打开地图功能');
            // 实际可调用地图API
        },
        dialPhone() {
            console.log('执行一键拨号');
            // 实际可使用window.location.href = 'tel:电话号码'
        },
        openChat() {
            console.log('打开在线咨询窗口');
            // 实际可使用弹窗组件或跳转页面
        },
        goToStore(item) {
            console.log('进入店铺页面');
            // 实际可使用Vue Router跳转
            this.$router.push({
                path: '/',
                query: {
                    shop_id: item.id
                }
            })
        },
    },
};
</script>

<style lang="less" scoped>
.page {}

.jieguo {
    width: 1530px;
    margin: 25px auto;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    font-style: normal;
    text-transform: none;
}

.Thesea {
    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 14px;
    color: #7b7b7b;

    font-style: normal;
    text-transform: none;
}

.companyName {
    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 14px;
    color: #000000;

    font-style: normal;
    text-transform: none;
}

.company-navigate {
    width: 1530px;
    height: 60px;
    margin: auto;
    display: flex;
    align-items: center;
}

.company-navigate img {
    width: 14px;
    height: 14px;
    margin-right: 12px;
}

.category-level2 {
    display: flex;
    border-top: 1px solid #e5e5e5;
    background: #fff;
}

.MoreSq {
    width: 60px;
    height: 26px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #f0f0f0;
    text-align: center;
    line-height: 26px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #4d4d4d;
    margin-top: 13px;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.lessSq {
    width: 60px;
    text-align: center;
    line-height: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #f0f0f0;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #4d4d4d;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
    margin-top: 13px;
}

.shopTypeStype {
    width: 1530px;
    margin: auto;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
}

.zonghe {
    width: 117px;
    height: 48px;
    background: #fafafa;
    border-radius: 0px 0px 0px 0px;
    // border: 1px solid #e5e5e5;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.category-level1 {
    border: 1px solid #f7f7f7;
    display: flex;
    padding-right: 24px;
    background: #fff;
}

.allTypeRight {
    // padding: 4px 8px;
    text-align: center;

    margin-right: 20px;
    cursor: pointer;
}

.allTypeRightTwo {
    padding: 4px 8px;
    text-align: center;
    margin-right: 20px;
    margin-top: 13px;
    cursor: pointer;
}

.allTypeRightThree {
    padding: 4px 8px;
    text-align: center;
    margin-right: 20px;
    cursor: pointer;
}

.allType {
    border-radius: 4px 4px 4px 4px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding-left: 20px;
    flex-wrap: wrap;
}

.allTypeThree {
    width: 1320px;
    border-radius: 4px 4px 4px 4px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: #f7f7f7;
    margin-bottom: 20px;
    padding: 8px 0;
    margin-top: 17px;
    margin-left: 20px;
}

.allTypeTwo {
    width: 1320px;
    border-radius: 4px 4px 4px 4px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.category-label {
    width: 117px;
    background: #fafafa;
    border-radius: 0px 0px 0px 0px;
    // border: 1px solid #e5e5e5;
    line-height: 48px;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;

    font-style: normal;
    text-transform: none;
}

.active-category {
    background: #e1eafb;
    border-radius: 3px 3px 3px 3px;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #0052d9;
    font-style: normal;
    text-transform: none;
}

.sort-and-count {
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    line-height: 48px;
    text-align: center;
    margin-top: 16px;
    background: #fff;
}

.count-label {
    padding-right: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;

    font-style: normal;
    text-transform: none;
}

.noDataClass {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

::v-deep .el-card__body {
    padding-left: 0px;
    padding-right: 0px;
}

.xianDiv {
    width: 1011px;
    height: 0px;
    border: 1px dashed #D7D9E0;
    margin: 12px 0;
    opacity: 0.6;
}

.jiantou {
    width: 32px;
    height: 76px;
    background: #000000;
    border-radius: 8px 0px 0px 8px;
    opacity: 0.4;
    color: #FFFFFF;
    position: absolute;
    right: 25px;
    top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
        font-size: 20px
    }
}

.img-item {
    width: 130px;
    height: 210px;
}

.img-item img {
    width: 130px;
    height: 210px;
}

.gongsiWz {
    padding-left: 5px;
    padding-right: 16px;
}

.zhty {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #6D6D6D;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 20px;
}

.produtName {

    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    font-size: 24px;
    color: #ED232A;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.priceIcon {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #ED232A;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.shangjiaoTj {
    width: 1530px;
    margin: auto;
    background-color: #fff;
    border: 1px solid #EEEEEE;
    margin-top: 20px;
}

.shangjiaoTjDiv .shangjiaoTj:first-child {
    background-color: #F2F5F9;
    ;
}

.pageClass {
    display: flex;
    margin-top: 26px;
    justify-content: center;
    padding-bottom: 26px;

    .pageClass-first {
        width: 40px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 16px;
        cursor: pointer;
    }

    .pageClass-Last {
        width: 69px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
    }

    .pageClass-num {
        width: 32px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #EEEEEE;
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        line-height: 32px;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
    }

    .pageShenLue {
        font-weight: normal;
        font-size: 14px;
        color: #7A7A7A;
        margin-right: 10px;
    }

    .active {
        background: #014BC4;
        color: #FFF;
    }
}

/* 顶部区域样式 */
.header {

    display: flex;
    padding: 24px;

}

.header-left {}

.company-logo {
    width: 310px;
}

.header-right {
    padding-left: 31px;
    margin-top: 5px;
}

.company-title {
    display: flex;
    align-items: center;
}

.company-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;

}

.tag {
    margin-left: 10px;

}

.tag img {
    width: 78px;
    height: 20px;
}

.rating {
    margin-left: 10px;
}

.company-address span {
    font-size: 14px;
    font-weight: 400;
}

.company-address {
    margin-top: 16px;
}

.map-button {
    background: none;
    border: none;
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
}

.company-intro {
    width: 1011px;
    margin-top: 12px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 功能按钮区域样式 */
.button-area {
    // display: flex;
    // justify-content: center;
    margin-top: 30px;
}

.primary-button {
    width: 130px;
    height: 40px;
    background: #014BC4;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
}

.primary-button img {
    width: 18px;
    height: 18px;
}

.success-button img {
    width: 18px;
    height: 18px;
}

.success-button {
    width: 130px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #014BC4;

    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #014BC4;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    margin-left: 16px;
}

.info-button img {
    width: 18px;
    height: 18px;
}

.info-button {
    width: 130px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #014BC4;

    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #014BC4;
    font-style: normal;
    text-transform: none;
    cursor: pointer;
    margin-left: 16px;
}

/* 商品展示区域样式 */
.product-area {
    display: flex;
    padding: 0 24px 24px 24px;

    border-radius: 8px 8px 8px 8px;
}

.lbtWidth {
    width: 1370px;
    background: #FFFFFF;
    display: flex;
    padding: 24px 0 24px 8px;
    position: relative;
}

.product-item {
    // width: 222px;
    // height: 162px;
    // background-color: #666;
    margin-right: 20px;
    position: relative;
}

.product-item img {
    width: 248px;
    height: 162px;
}

.product-name-overlay {
    width: 100%;
    height: 36px;
    background: #000000;
    border-radius: 0px 0px 0px 0px;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    line-height: 36px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
}






.product-list-wrapper {
    width: 1530px;
    margin: auto;
}

.product-card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 20px;
}

.product-image {
    width: 100%;
    height: 240px;
    display: block;
}

.product-info {
    padding: 15px 15px 0 15px;
}

.price-location {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.price {

    font-family: Arial, Arial;
    font-weight: 400;
    font-size: 14px;
    color: #333333;

    text-align: left;
    font-style: normal;
    text-transform: none;
}

.location {
    color: #666;
    font-size: 14px;
}

.discount-tag {
    background-color: red;
    color: white;
    padding: 2px 6px;
    border-radius: 2px;
}

.product-name {
    margin-bottom: 10px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    width: 297px;
    height: 22px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #000000;

    text-align: left;
    font-style: normal;
    text-transform: none;

}

.seller-info {
    display: flex;
    align-items: center;
    margin-top: 26px;

    padding-top: 10px;
    border-top: 1px solid #F9F9F9;
}

.weizhiIcon {
    width: 12px;
    height: 16px;
}

.seller-type {
    // background-color: #67c23a;
    // color: white;
    // padding: 2px 6px;
    // border-radius: 2px;
    margin-right: 5px;
}

.seller-type img {
    width: 78px;
    height: 20px;
}

.seller-name {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #716F6B;

    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>